I'm trying to send file from vue.js using axios and receive it in spring-based backend.
Here's my frontend part:
uploadMap(context, map){
console.log('uploading map...')
const formData = new FormData();
formData.append("file", map);
axios.post("/info/map/upload", formData)
.then(function (result) {
console.log(result);
}, function (error) {
console.log(error);
});
},
and on backend:
@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE, value = "/info/uploadFile")
public void uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
System.out.println("file uploaded");
String basePath = "/Users/admin/software/app1/uploads/";
String filePath = basePath + file.getOriginalFilename();
File dest = new File(filePath);
file.transferTo(dest);
}
Backend part works when using Insomnia/Postman for testing. But when I want to invoke my frontend code, I get on backned:
2020-02-23 17:38:52.038 WARN 61799 --- [nio-5000-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundary2cAmVUpGnPfkQax3' not supported]
How should I deal with that?
Thanks in advance 🤓